<template>
    <div class="box">
        <div class="leftmargin">
            <!-- 头部 -->
            <div class="top">
                <div class="left">
                    <el-icon>
                        <Grid />
                    </el-icon>
                    <span>&nbsp;字典数据</span>
                </div>
                <div class="right">
                    <el-input v-model="name" placeholder="字典编号" style="width:140px;margin-right: 15px;" />
                    <el-button type="primary" :icon="Search" placeholder-style="font-size:12px;" @click="query">
                        <span>查询</span>
                    </el-button>
                    <!-- <el-button type="primary" :icon="Search" plain><span>高级查询</span></el-button> -->
                    <el-button type="success" :icon="Plus" @click="dialogFormVisible = true"><span>新建</span></el-button>
                    <el-button type="primary" :icon="EditPen" @click="edit"><span>编辑</span></el-button>
                    <el-button type="danger" :icon="Delete" @click="del(rowId)"><span>删除</span></el-button>
                    <el-button type="success" :icon="Bottom" plain><span>导出</span></el-button>
                </div>
                <!-- 弹出框 -->
                <el-dialog v-model="dialogFormVisible" width="800px">
                    <template #header="{ close, titleId, titleClass }">
                        <div class="my-header">
                            <el-icon color="white">
                                <Warning />
                            </el-icon>
                            <span :id="titleId" :class="titleClass">新建</span>
                        </div>
                    </template>
                    <el-form :model="tableData" class="dialog">
                        <!-- 第一行 -->
                        <div class="first">
                            <el-form-item label="字典编号:">
                                <el-input class="line" v-model="tableData.id" placeholder="请输入字典编号"
                                    autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="字典名称:">
                                <el-input class="line" v-model="tableData.name" autocomplete="off"
                                    placeholder="请输入字典名称" />
                            </el-form-item>
                            <el-form-item label="父级ID:">
                                <el-input-number class="line" v-model="tableData.level" :min="0" :max="999"
                                    controls-position="right" />
                            </el-form-item>
                        </div>
                        <!-- 第二行 -->
                        <div class="first second">
                            <el-form-item label="排序号:" style="margin-left:12px;">
                                <el-input-number class="line" v-model="tableData.sqi" :min="0" :max="999"
                                    controls-position="right" />
                            </el-form-item>
                            <el-form-item label="是否启用:">
                                <el-select class="line" v-model="value" placeholder="请选择是否启用">
                                    <el-option v-model="tableData.order" v-for="item in options" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="创建时间:">
                                <el-input class="linetime" :prefix-icon="PieChart" disabled placeholder="请选择创建时间" />
                            </el-form-item>
                        </div>
                        <!-- 第三行 -->
                        <div class="third">
                            <el-form-item label="sql语句:" style="margin-left:12px;">
                                <div>
                                    <el-input class="linetext" v-model="tableData.injection"
                                        :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                                        placeholder="如果从数据库加载数据源，请按此格式配sqi语句" />
                                </div>
                            </el-form-item>
                            <el-form-item label="备注:" style="margin-left:12px;">
                                <div>
                                    <el-input class="line" v-model="tableData.enable" type="textarea"
                                        placeholder="请输入备注" />
                                </div>
                            </el-form-item>
                        </div>
                    </el-form>
                    <!-- 关闭按钮 -->
                    <template #footer>
                        <span class="btn-footer">
                            <el-button @click="dialogFormVisible = false">关闭</el-button>
                            <el-button type="primary" v-if="isEdit" @click="updataTbale">修改</el-button>
                            <el-button type="primary" @click="add" v-else>保存</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 警告文本 -->
            <div class="text">
                <div class="textleft">
                    <el-icon color="red">
                        <CircleCloseFilled />
                    </el-icon>
                    <span>界面下拉框、多选、checkbox等数据源都在此处维护，也是代码生成器中的数据源
                    </span>
                </div>
            </div>
            <!-- 表格数据 -->
            <div class="table">
                <el-table height="430" stripe :data="list" border style="width: 100%;" @select="select">
                    <!-- 全选 -->
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="字典编号"></el-table-column>
                    <el-table-column prop="name" label="字典名称" />
                    <el-table-column prop="level" label="父级ID" />
                    <el-table-column prop="sqi" label="sqI语句" />
                    <el-table-column prop="order" label="排序号" />
                    <el-table-column prop="injection" label="备注" />
                    <el-table-column prop="enable" label="是否启用" />
                    <el-table-column prop="creationtime" label="创建时间" />
                    <el-table-column prop="amendtime" label="修改时间" />
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paging">
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="PageIndex" v-model:page-size="PageSize"
                        :page-sizes="[20, 40, 60, 80]" layout="sizes, prev, pager, next,jumper" :total="PageAll"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
// 导入icon图标
import { Grid, Search, Plus, EditPen, Delete, Bottom, CircleCloseFilled, Warning, PieChart } from '@element-plus/icons-vue'
// 导入组合式api
import { ref } from 'vue'
// 导入axios
import axios from 'axios'
// 输入框
// let input = ref('')
// 指定页码
let PageIndex = ref(1)
// 页面数据数量
let PageSize = ref(20)
// 页面总数量
let PageAll = ref(400)
// 弹出框状态
let dialogFormVisible = ref(false)
// 编辑弹出框
let isEdit = ref(false);
// 启用数据
let value = ref('')
// 名称查询
let name = ref('')
// 编辑接收空数组
let tables = ref([])

// 是否启用
const options = [
    {
        value: '是',
        label: '是',
    },
    {
        value: '否',
        label: '否',
    },
]
// 获取全选框数据
const rowId = ref('')
// 表格空数组
let list = ref([])

let tableData = ref({
    id: '',
    name: '',
    level: '',
    sqi: '',
    order: '',
    injection: '',
    enable: '',
    creationtime: '',
    amendtime: '',
})

// 获取表格数据
// let login = async () => {
//     let { data } = await axios.get('https://www.vol.com/SelectSettings/all')
//     list.value = data
// }
// // 调用数据方法
// login()

// 增加
let add = async () => {
    let data = await axios.post('https://www.vol.com/SelectSettings/add', {
        id: tableData.value.id,
        name: tableData.value.name,
        level: tableData.value.level,
        sqi: tableData.value.sqi,
        order: tableData.value.order,
        injection: tableData.value.injection,
        enable: tableData.value.enable,
        creationtime: tableData.value.creationtime,
        amendtime: tableData.value.amendtime,
    })
    if (data) {
        alert('添加成功！')
        query()
        dialogFormVisible = false;
    } else {
        alert('添加失败！')
    }
}

// 编辑
let edit = async () => {
    if (tables.value.length != 1) return alert('请选择一个进行修改')
    dialogFormVisible.value = true;
    isEdit.value = true;

    let { data } = await axios.get('https://www.vol.com/SelectSettings/updaId', {
        params: {
            id: tables.value[0].id
        }
    })
    tableData.value = data
}
// 修改
let updataTbale = async () => {
    let data = await axios.post('https://www.vol.com/SelectSettings/UpDate', tableData.value)
    if (data) {
        alert('修改成功!')
        query()
        dialogFormVisible.value = false;
    } else {
        alert('修改失败!')
    }
}

// 获取全选框
let select = (row) => {
    tables.value = row
}

// 删除
let del = () => {
    if (tables.value.length == 0) return alert('请选择至少一条数据删除')
    tables.value.forEach(async r => {
        let { data } = await axios.post('https://www.vol.com/SelectSettings/SeaDel', { id: r.id })
        if (data) {
            return ElMessage({
                message: '删除成功.',
                type: 'success',
            })
        }
    })
    query()
}
// 查询
let query = async () => {
    let { data: { data } } = await axios.post('https://www.vol.com/SelectSettings/Search', {
        currentPage: PageIndex.value,
        pageSize: PageSize.value,
        name: name.value,
    })
    list.value = data
    // console.log(data);
}
// 渲染表格
query()
// 获取每页数据
let handleSizeChange = (val) => {
    PageSize = val
}
// 获取页面页码数据
let handleCurrentChange = (val) => {
    // console.log(val);
    PageIndex.value = val
    query()
}
</script>
<style scoped lang='scss'>
.box {
    width: 1720px;

    .leftmargin {
        margin-left: 15px;

        // 头部按钮
        .top {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 10px;
                height: 30px;
                border-bottom: 2px solid black;

                span {
                    font-size: 14px;
                    font-weight: bolder
                }
            }

            ;

            .right {
                span {
                    font-size: 10px;
                }
            }
        }

        // 红色文本警告
        .text {
            height: 40px;
            background: #FEF0F0;
            color: red;
            margin-top: 15px;
            line-height: 40px;

            .textleft {
                margin-left: 15px;
                display: flex;
                align-items: center;

                span {
                    font-size: 13px;
                    margin-left: 10px;
                }
            }

        }

        // 表格
        .table {
            margin-top: 15px;
            height: 500px;
        }

        // 分页
        .paging {
            // margin-top: 10px;
        }
    }
}

// 表格第一行背景颜色
::v-deep(.el-table__header th) {
    background-color: #FAFAFA;
}

// 抽屉
.dialog {
    .first {
        display: flex;
        justify-content: center;
        margin-top: -20px;

        // 输入框大小
        .line {
            width: 180px;
            height: 30px;
            margin-right: 30px;
        }

        .linetime {
            width: 180px;
            margin-right: 30px;
        }
    }

    .second {
        margin-top: 0;
        margin-left: 5px;
    }

    .third {
        display: flex;
        justify-content: space-between;

        .linetext {
            width: 400px;
            height: 50px;
        }

        .line {
            width: 180px;
            height: 50px;
            margin-right: 30px;
        }

    }
}

// 弹窗头部背景颜色
.my-header {
    padding: 18px;
    width: 108%;
    background: linear-gradient(to right, #0cd7bd, #4cc4f3);
    margin: -20px 0 0 -20px;
    display: flex;
    align-items: center;

    span {
        color: white;
        font-size: 14px;
        font-weight: bolder;
        margin-left: 5px;
    }
}
</style>